import React, { useState } from 'react';

import { Button, Tabs, Tag } from 'antd';
import TableMents from './TableMents';
const { TabPane } = Tabs;

const Togglebarments = () => {

  function callback(key) {
    console.log(key);

  }
  const demosList = [
    {
      demo_id: 1,
      demo_title: '全部列表',
    }, {
      demo_id: 2,
      demo_title: '通知公共',
    }, {
      demo_id: 3,
      demo_title: '规章制度',
    }, {
      demo_id: 4,
      demo_title: '其他信息',
    }
  ]

  const onTabClick = (keys, event) => {
    console.log(keys, event)
  }
  const Demo = () => {
    return (
      <Tabs onChange={callback} tabBarGutter="10px" onTabClick={onTabClick}>
        {
          demosList.map((item) => {
            return (
              <TabPane tab={<Tag color="#f50" >{item.demo_title}</Tag>} key={item.demo_id}>
                <TableMents></TableMents>

              </TabPane>
            )
          })
        }
      </Tabs>
    )
  }
  return (
    <div>
      <Demo />
    </div>
  );
}

export default Togglebarments;
